```html
<script setup>
  import * as toast from "@zag-js/toast"
  import { normalizeProps, useMachine } from "@zag-js/vue"
  import { computed } from "vue"

  // 1. Create the toaster
  const toaster = toast.createStore({
    placement: "top-end",
    overlap: true,
  })
</script>

<script setup>
  // 2. Design the toast component
  const props = defineProps<{ toast: toast.Options, index: number, parent: toast.GroupService }>()

  const machineProps = computed(() => ({ ...props.toast, parent: props.parent, index: props.index }))
  const service = useMachine(toast.machine, machineProps)

  const api = computed(() => toast.connect(service, normalizeProps))
</script>

<template>
  <div v-bind="api.getRootProps()">
    <h3 v-bind="api.getTitleProps()">{{ api.title }}</h3>
    <p v-bind="api.getDescriptionProps()">{{ api.description }}</p>
    <button @click="api.dismiss()">Close</button>
  </div>
</template>

<script setup>
  // 3. Design the toaster
  const service = useMachine(toast.group.machine, { id: "1", store: toaster })
  const api = toast.group.connect(service, normalizeProps)
</script>

<template>
  <div v-bind="api.getGroupProps()">
    <Toast
      v-for="toast in api.getToasts()"
      :key="toast.id"
      :toast="toast"
      :index="index"
      :parent="service"
    />
  </div>
  <RestOfYourApp />
</template>

<script setup>
  // 4. Within your app
  const topRightToast = () => toast.create({ title: "Hello" })

  const bottomRightToast = () =>
    toast.create({ title: "Data submitted!", type: "success" })
</script>

<template>
  <button @click="topRightToast">Add top-right toast</button>
  <button @click="bottomRightToast">Add bottom-right toast</button>
</template>
```
